<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
		    margin: 0;
		    padding: 0;
		  }
		  .shopcart,
		  .shop {
		    width: 600px;
		    margin: 0 auto;
		    font-size: 14px;
		    border: 1px solid #000;
		    margin-top: 50px;
		    border-collapse: collapse;
		    text-align: center;
		  }
		  
		  th,
		  td {
		    border: 1px solid #000;
		  }
		  
		  th {
		    height: 40px;
		    background-color: yellowgreen;
		  }
		  
		  button {
		    padding: 0 6px;
		  }
		  
		  td {
		    height: 26px;
		  }
		  
		  .template {
		    display: none;
		  }
		  #a{
			  margin-left: 37%;
			  margin-top: 100px;
		  }
		  #a input{
			  line-height: 30px;
		  }
		  #o{
			  display: none;
		  }
		</style>
	</head>
	<body>
		<div id="a">
			<input type="text" id="" value="" placeholder="输入菜名" />
			<input type="number" id="" value="" placeholder="价位">
			<button type="submit" id="tianjia">添加</button>
		</div>
		<table class="shopcart">
			<thead>
				<tr>
					<th style="width:110px;">商品名称</th>
					<th style="width:120px;">数量</th>
					<th style="width:110px;">单价</th>
					<th style="width:110px;">小计</th>
					<th style="width:150px;">操作</th>
				</tr>
			</thead>
			<tbody class="shopcarttbody">
				<tr>
					<td>烧煎饼</td>
					<td>
						<button class="sub">-</button>
						<span class="count">0</span>
						<button class="add">+</button>
					</td>
					<td>
						单价:
						<span class="subprice">2</span>
					</td>
					<td>
						小计:
						<span class="subtotal">0</span>
					</td>
					<td>
						操作:<button class="delete">删除</button>
					</td>
				</tr>
				<tr>
					<td>水煮鱼</td>
					<td>
						<button class="sub">-</button>
						<span class="count">0</span>
						<button class="add">+</button>
					</td>
					<td>
						单价:
						<span class="subprice">15</span>
					</td>
					<td>
						小计:
						<span class="subtotal">0</span>
					</td>
					<td>
						操作:<button class="delete">删除</button>
					</td>
				</tr>
				<tr>
					<td>黄焖鸡</td>
					<td>
						<button class="sub">-</button>
						<span class="count">0</span>
						<button class="add">+</button>
					</td>
					<td>
						单价:
						<span class="subprice">20.5</span>
					</td>
					<td>
						小计:
						<span class="subtotal">0</span>
					</td>
					<td>
						操作:<button class="delete">删除</button>
					</td>
				</tr>

				<tr>
					<td colspan="5">商品一共<span class="totalcount"> 0 </span>件商品;共计花费 <span class="totalprice">0</span> 元</td>
				</tr>
				<tr id="o">
					<td></td>
					<td>
						<button class="sub">-</button>
						<span class="count">0</span>
						<button class="add">+</button>
					</td>
					<td>
						单价:
						<span class="subprice"></span>
					</td>
					<td>
						小计:
						<span class="subtotal">0</span>
					</td>
					<td>
						操作:<button class="delete">删除</button>
					</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>
<script type="text/javascript">
	// let body = document.querySelectorAll(".shopcarttbody")[0]
	// let tian = document.querySelectorAll(".add")
	// let jian = document.querySelectorAll(".sub")
	// let shan = document.querySelectorAll(".delete")
	// let tianjia = document.getElementById("tianjia")
	// let o = document.getElementById("o");
	// let a = document.querySelectorAll("input")
	// for (let i = 0; i < tian.length; i++) {
	// 	//添加
	// 	tian[i].onclick = function() {
	// 		let c = parseInt(this.parentNode.querySelectorAll(".count")[0].innerHTML) + 1
	// 		this.parentNode.querySelectorAll(".count")[0].innerHTML = c
	// 		xiaoji(this)
	// 		zongjia()

	// 	}
	// 	//减少
	// 	jian[i].onclick = function() {
	// 		if (this.parentNode.querySelectorAll(".count")[0].innerHTML <= 0) {
	// 			return
	// 		}
	// 		let c = parseInt(this.parentNode.querySelectorAll(".count")[0].innerHTML) - 1
	// 		this.parentNode.querySelectorAll(".count")[0].innerHTML = c
	// 		xiaoji(this)

	// 		zongjia()

	// 	}

	// 	//删除
	// 	shan[i].onclick = function() {
	// 		this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)
	// 		zongjia()

	// 	}

	// }
	// //小计
	// function xiaoji(n) {
	// 	let shuliang = parseInt(n.parentNode.querySelectorAll(".count")[0].innerHTML);
	// 	let danjia = parseFloat(n.parentNode.parentNode.querySelectorAll(".subprice")[0].innerHTML);
	// 	n.parentNode.parentNode.querySelectorAll(".subtotal")[0].innerHTML = danjia * shuliang;
	// }


	// //总价
	// function zongjia() {
	// 	let sl = document.querySelectorAll(".count");
	// 	let zongsl = 0;
	// 	for (let i = 0; i < sl.length; i++) {
	// 		zongsl += parseFloat(sl[i].innerHTML)
	// 	}
	// 	let ozongsl = document.querySelectorAll(".totalcount")[0];
	// 	ozongsl.innerHTML = zongsl

	// 	let xiji = document.querySelectorAll(".subtotal");
	// 	let zongjia = 0;
	// 	for (let i = 0; i < xiji.length; i++) {
	// 		zongjia += parseFloat(xiji[i].innerHTML)
	// 	}
	// 	let ozongjia = document.querySelectorAll(".totalprice")[0];
	// 	ozongjia.innerHTML=zongjia

	// }
	// tianjia.onclick = function() {
	// 	let kl = o.cloneNode(true)
	// 	kl.id = "",
	// 	kl.firstElementChild.innerHTML = a[0].value;
	// 	kl.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild.innerHTML = a[1].value;
	// 	body.insertBefore(kl, body.lastElementChild.previousElementSibling)

	// }




	let body = document.querySelectorAll(".shopcarttbody")[0]
	let tianjia = document.getElementById("tianjia")
	let o = document.getElementById("o");
	let a = document.querySelectorAll("input")
	body.onclick = function(e) {
		let thiss = e.target
		if (thiss.className === "add") {
			let c = parseInt(thiss.parentNode.querySelectorAll(".count")[0].innerHTML) + 1
			thiss.parentNode.querySelectorAll(".count")[0].innerHTML = c
			xiaoji(thiss)
			zongjia()

		}
		if (thiss.className === "sub") {
			if (thiss.parentNode.querySelectorAll(".count")[0].innerHTML <= 0) {
				return
			}
			let c = parseInt(thiss.parentNode.querySelectorAll(".count")[0].innerHTML) - 1
			thiss.parentNode.querySelectorAll(".count")[0].innerHTML = c
			xiaoji(thiss)
			zongjia()

		}
		if (thiss.className === "delete") {
			thiss.parentNode.parentNode.parentNode.removeChild(thiss.parentNode.parentNode)
			zongjia()


		}
		//小计
		function xiaoji(n) {
			var shuliang = parseInt(n.parentNode.querySelectorAll(".count")[0].innerHTML);
			var danjia = parseFloat(n.parentNode.parentNode.querySelectorAll(".subprice")[0].innerHTML);
			n.parentNode.parentNode.querySelectorAll(".subtotal")[0].innerHTML = danjia * shuliang;
		}


		//总价
		function zongjia() {
			let sl = document.querySelectorAll(".count");
			let zongsl = 0;
			for (let i = 0; i < sl.length; i++) {
				zongsl += parseFloat(sl[i].innerHTML)
			}
			let ozongsl = document.querySelectorAll(".totalcount")[0];
			ozongsl.innerHTML = zongsl

			let xiji = document.querySelectorAll(".subtotal");
			let zongjia = 0;
			for (let i = 0; i < xiji.length; i++) {
				zongjia += parseFloat(xiji[i].innerHTML)
			}
			let ozongjia = document.querySelectorAll(".totalprice")[0];
			ozongjia.innerHTML = zongjia

		}
	}
	tianjia.onclick = function() {
		let kl = o.cloneNode(true)
		kl.id = "",
		kl.firstElementChild.innerHTML = a[0].value;
		kl.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild.innerHTML = a[1].value;
		if (a[0].value == "" || a[1].value == "") {
			return
		}else{
			a[0].value=""
			a[1].value=""
		}
		body.insertBefore(kl, body.lastElementChild.previousElementSibling)
	}
</script>
